<template>
  <div id="trend">
    <div class="line-chart" ref="chartRef"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';
import { getQuickReportTrend } from '@/api/onlineStatistics';

let chart: any;

const props = defineProps({
  time: {
    type: Object,
    default: {},
  },
  type: {
    type: String,
    default: '1',
  },
});
const chartRef = ref();
const { type } = props;
const getDeviceType = async () => {
  if (type == '1') {
    props.time.country = '中国';
    const res = await getQuickReportTrend(props.time);
    if (res.code == 200) {
      chart = echarts.init(chartRef.value);
      init(res.data, chart);
    }
    return;
  }
  props.time.country = '国外';
  const res = await getQuickReportTrend(props.time);
  if (res.code == 200) {
    chart = echarts.init(chartRef.value);
    init(res.data, chart);
  }
};
watch(
  () => props.time,
  () => {
    if (chart) chart.dispose();
    getDeviceType();
  },
);

getDeviceType();

const init = (data: any, dom: any) => {
  let option = {
    title: {
      text: type == '1' ? '国内地震数量趋势' : '国外地震数量趋势',
      textStyle: {
        color: '#fff',
      },
    },
    legend: {
      data: ['地震数量'],
      textStyle: {
        color: '#fff',
      },
      right: '7%',
    },
    grid: {
      x: '12%',
      width: '82%',
      top: '20%',
      bottom: '10%',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.xData,
      axisLine: {
        show: false,
        lineStyle: {
          color: '#F1F1F1',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#fff',
        showMaxLabel: true,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      name: '',
      nameTextStyle: {
        color: '#ffff',
      },
      axisTick: { show: false },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, .14)',
          type: 'dashed',
        },
      }, // 网格线
      axisLine: {
        lineStyle: {
          color: '#F1F1F1',
        },
      },

      axisLabel: {
        color: '#fff',
        formatter: '{value} ',
      },
    },

    series: {
      name: '地震数量',
      type: 'line',
      smooth: true,
      symbol: 'none',
      itemStyle: {
        normal: {
          color: type == '1' ? '#29BB9D' : '#FFC53D',
        },
      },
      areaStyle: {
        //区域填充样式
        normal: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(41, 187, 157, 0.17)',
              },
              {
                offset: 1,
                color: 'rgba(41, 187, 157, 0)',
              },
            ],
            false,
          ),
          shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
      },
      data: data.yData,
    },
  };
  dom.setOption(option);
};
</script>

<style lang="scss" scoped>
#trend {
  width: 100%;
  height: 22vh;
  box-sizing: border-box;

  .line-chart {
    width: 100%;
    height: 100%;
  }
}
</style>
